<!-- 产品详情 ：主视区 -->
<template>
  <div class="m">
    <div class="m_l">
      <div class="m_l_zoom">
        <product-photo-slide :list="images" v-if="images.length > 1" :key="new Date().getTime()"></product-photo-slide>
        <div class="imgBox" v-else>
          <img :src="splitFirst(data.photoUrls)" alt="" class="img" v-if="data.photoUrls" />
          <img :src="defaultLogo" alt="" class="img" v-else />
        </div>
      </div>
    </div>
    <div class="m_r" v-if="data" :class="localeCn ? '' : 'en'">
      <!-- 基本描述 -->
      <div class="m_r_descBox">
        <h4 class="m_r_t">{{ localeCn ? data.productName : data.productNameEn }}</h4>
        <div class="m_r_txt">
          <p class="lr">
            <span class="key">{{ $t("product.detail.category") }}</span>
            <span class="val">{{ categoryNames ? categoryNames : $t("noData") }}</span>
          </p>
        </div>
        <div class="m_r_txt">
          <p class="lr">
            <span class="key">{{ $t("product.detail.content") }}</span>
            <span class="val text_e">{{ desc ? desc : $t("noData") }} </span>
          </p>
        </div>
      </div>
      <div class="btns">
        <div class="btns_share">
          <div class="btnBox">
            <!-- 询盘 -->
            <span class="btns_share_i">
              <div class="btn" @click="showInquire = true" :class="{ en: localeEn }">{{ $t("inquire-title") }}</div>
            </span>
            <!-- 索取小样 -->
            <span class="btns_share_i">
              <div class="btn" @click="showSample = true" :class="{ en: localeEn }">{{ $t("sample-title") }}</div>
            </span>
          </div>
          <div class="iconBox">
            <span class="btns_share_i" :class="{ ml20: !isMobile }" v-if="JSON.stringify(data) !== '{}'">
              <product-collect :key="data.isCollect" />
            </span>
            <span class="btns_share_i ml10" v-if="JSON.stringify(data) !== '{}'">
              <product-like :key="data.isLike" />
            </span>
            <span class="btns_share_i ml10 hand" @click="_initShare">
              <img src="@/assets/images/icon_share.png" alt="" class="img" /><span class="ml20 txt">{{ $t("product-detail-share") }}</span>
            </span>
          </div>
          <!-- 分享 -->
          <span class="btns_share_i ml20 shareIcon">
            <div id="share"></div>
          </span>
        </div>
      </div>
    </div>
    <!-- 询盘弹框 -->
    <el-dialog :title="$t('inquire-title')" :visible.sync="showInquire" :width="isMobile ? '90%' : '750px'" :close-on-click-modal="false" :top="isMobile ? '6vh' : '15vh'">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item :label="$t('inquire-label-product')" prop="productId">
          <el-select v-model="form.productId" :placeholder="$t('inquire-placeholder-product')" style="width: 100%" clearable>
            <el-option v-for="item in listProduct" :key="item.id" :label="localeCn ? item.productName : item.productNameEn" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('inquire-label-name')" prop="name">
          <el-input v-model="form.name" autocomplete="off" :maxlength="50" clearable :placeholder="$t('inquire-placeholder-name')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('inquire-label-phone')" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" :maxlength="50" clearable :placeholder="$t('inquire-placeholder-phone')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('inquire-label-email')" prop="email">
          <el-input v-model="form.email" autocomplete="off" :maxlength="50" clearable :placeholder="$t('inquire-placeholder-email')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('inquire-label-num')" prop="num">
          <el-input v-model="form.num" autocomplete="off" clearable :maxlength="10" :placeholder="$t('inquire-placeholder-num')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('inquire-label-remark')" prop="remark">
          <el-input v-model="form.remark" autocomplete="off" clearable type="textarea" :rows="3" :maxlength="200" :placeholder="$t('inquire-placeholder-remark')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span class="btnHa btnHa-border" @click="reset">{{ $t("inquire-btn-cancel") }}</span>
        <span class="btnHa btnHa-bg" @click="submit">{{ $t("inquire-btn-ok") }}</span>
      </div>
    </el-dialog>
    <!-- 小样弹框 -->
    <el-dialog :title="$t('sample-title')" :visible.sync="showSample" :width="isMobile ? '90%' : '750px'" :close-on-click-modal="false" :top="isMobile ? '6vh' : '15vh'">
      <el-form :model="formSample" ref="formSample" :rules="rulesSample">
        <el-form-item :label="$t('inquire-label-product')" prop="productId">
          <el-select v-model="formSample.productId" :placeholder="$t('inquire-placeholder-product')" style="width: 100%" clearable>
            <el-option v-for="item in listProduct" :key="item.id" :label="localeCn ? item.productName : item.productNameEn" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('sample-label-name')" prop="name">
          <el-input v-model="formSample.name" autocomplete="off" :maxlength="50" clearable :placeholder="$t('sample-placeholder-name')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('sample-label-phone')" prop="phone">
          <el-input v-model="formSample.phone" autocomplete="off" :maxlength="50" clearable :placeholder="$t('sample-placeholder-phone')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('sample-label-email')" prop="email">
          <el-input v-model="formSample.email" autocomplete="off" :maxlength="50" clearable :placeholder="$t('sample-placeholder-email')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('sample-label-num')" prop="num">
          <el-input v-model="formSample.num" autocomplete="off" clearable :maxlength="10" :placeholder="$t('sample-placeholder-num')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('sample-label-remark')" prop="remark">
          <el-input v-model="formSample.remark" autocomplete="off" clearable type="textarea" :rows="3" :maxlength="200" :placeholder="$t('sample-placeholder-remark')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span class="btnHa btnHa-border" @click="resetSample">{{ $t("sample-btn-cancel") }}</span>
        <span class="btnHa btnHa-bg" @click="submitSample">{{ $t("sample-btn-ok") }}</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { share } from "@/api/product";
import { sample, inquiry } from "@/api/common";
export default {
  props: {
    data: {
      type: Object,
    },
    productId: {
      type: String,
      default: "",
    },
    listProduct: {
      type: Array,
      default: [],
    },
  },
  computed: {
    images() {
      return this.data ? this.split2Arr(this.data && this.data.photoUrls) : [];
    },
    // 产品分类
    categoryNames() {
      const name = this.localeCn ? "name" : "nameEn";
      const categoryList = this.data && this.data.categoryList;
      if (categoryList && categoryList.length == 0) return;
      return categoryList.map((item) => item[name]).join(", ");
    },
    desc() {
      const name = this.localeCn ? "descr" : "descrEn";
      return this.data[name];
    },
  },
  data() {
    return {
      showInquire: false,
      form: {
        productId: "",
        name: "",
        phone: "",
        num: "",
        remark: "",
        email: "",
      },
      rules: {
        productId: [
          {
            required: true,
            message: this.$t("inquire-placeholder-product"),
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("inquire-placeholder-name"),
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: this.$t("inquire-placeholder-phone"),
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: this.$t("inquire-placeholder-num"),
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: this.$t("inquire-placeholder-remark"),
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: this.$t("inquire-placeholder-email"),
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              let reg = /^[\w.+-\u4e00-\u9fa5]+@[\w-]+(\.[\w-]+)+$/;
              if (!reg.test(value) && value) {
                callback(new Error(this.$t("login-placeholder-email-format")));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
      showSample: false, //索取小样
      formSample: {
        productId: "",
        name: "",
        phone: "",
        num: "",
        remark: "",
        email: "",
      },
      rulesSample: {
        productId: [
          {
            required: true,
            message: this.$t("inquire-placeholder-product"),
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("inquire-placeholder-name"),
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: this.$t("inquire-placeholder-phone"),
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: this.$t("inquire-placeholder-num"),
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: this.$t("inquire-placeholder-remark"),
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: this.$t("inquire-placeholder-email"),
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              let reg = /^[\w.+-\u4e00-\u9fa5]+@[\w-]+(\.[\w-]+)+$/;
              if (!reg.test(value) && value) {
                callback(new Error(this.$t("login-placeholder-email-format")));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.initProductId();
  },
  methods: {
    initProductId() {
      this.form.productId = this.productId;
      this.formSample.productId = this.productId;
    },
    reset() {
      this.$refs.form.resetFields();
      this.showInquire = false;
    },
    resetSample() {
      this.$refs.formSample.resetFields();
      this.showSample = false;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        this.form.productId = this.productId;
        if (valid) {
          this.invoke(inquiry, this.form).then((res) => {
            if (res && res.code == 200) {
              this.$message.success(this.$t("inquire-publish-success"));
              this.showInquire = false;
              this.form.name = "";
              this.form.phone = "";
              this.form.num = "";
              this.form.email = "";
              this.form.remark = "";
            }
          });
        }
      });
    },
    submitSample() {
      this.$refs.formSample.validate((valid) => {
        this.formSample.productId = this.productId;
        if (valid) {
          this.invoke(sample, this.formSample).then((res) => {
            if (res && res.code == 200) {
              this.$message.success(this.$t("sample-publish-success"));
              this.showSample = false;
              this.formSample.name = "";
              this.formSample.phone = "";
              this.formSample.num = "";
              this.formSample.email = "";
              this.formSample.remark = "";
            }
          });
        }
      });
    },
    _initShare() {
      socialShare("#share", {
        sites: ["wechat"],
      });
      this.shareFun();
    },
    shareFun() {
      this.invoke(share, this.productId).then((res) => {
        if (res && res.code == 200) {
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ml20 {
  margin-left: 20px;
}

.btn {
  $c: #d53b76;
  padding: 0 20px;
  height: 50px;
  background: $c;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  cursor: pointer;
  &-border {
    border: 1px solid $c;
    color: $c;
  }
  &.en{
    font-size: 18px;
  }
}

:deep(.el) {
  &-dialog__body {
    padding-top: 0;
  }
  &-form-item {
    margin-bottom: 10px;
  }
  &-input__inner,
  &-textarea__inner {
    border-radius: 0;
  }
}

p {
  margin: 0;
}

.m {
  $wL: 370px;
  $wR: auto;
  $gutter: 60px;
  display: flex;
  background-color: #fff;
  border-radius: 10px;
  padding: 90px 50px;

  // 左侧
  &_l {
    width: $wL;
    flex: 0 0 $wL;
   
    border-radius: 10px;
    overflow: hidden;

    &_zoom {
      height: 100%;
      display: flex;
      align-items: flex-start;

      .imgBox {
        width: $wL;
        height: ($wL*210px)/370px;
        display: flex;
        justify-content: center;
        align-items: center;
		 border: 1px solid #f1f2f3;

        .img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
  }

  // 右侧
  &_r {
    width: $wR;
    flex: $wR;
    margin-left: $gutter;

    // 标题
    &_t {
      margin-bottom: 44px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      width: 100%;
      font-size: 32px;
      max-height: 3em;
      color: #000;
      box-sizing: border-box;
      margin-top: 0;
    }

    &_txt {
      font-size: 18px;
      color: #8b8b8b;
      line-height: 1.8;

      &:not(:last-child) {
        margin-bottom: 1em;
      }
    }

    &_descBox {
      min-height: 450px;
    }

    // key-val布局
    .lr {
      margin-bottom: 30px;
      display: flex;

      .key {
        $w: 100px;
        width: $w;
        flex: 0 0 $w;
        display: block;
        white-space: nowrap;
        // font-weight: bold;
      }

      .val {
        text-align: justify;
      }

      &.en {
        .key {
          $w: 140px;
          width: $w;
          flex: 0 0 $w;
          margin-right: 4px;
        }
      }
    }
  }

  .btns {
    display: flex;
    align-items: center;

    &_wrap {
      flex-wrap: wrap;

      .mb50 {
        margin-bottom: 20px;
      }

      .btns_share {
        $w: 100%;
        width: $w;
        flex: 0 0 $w;
      }
    }

    // 分享
    &_share {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-grow: 1;

      .share-component {
        display: flex;
      }

      .btnBox {
        width: 300px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .iconBox {
        width: 500px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      &_i {
        display: flex;
        align-items: center;
        margin-right: 20px;

        .txt {
          color: #8b8b8b;
          font-size: 18px;
          white-space: nowrap;
        }

        .img {
          width: 24px;
        }

        :deep(.social-share) {
          $sc: 23/19;
          $w: 30px;
          $h: calc(#{$w} / #{$sc});

          .social-share-icon {
            border: none;
            border-radius: unset;
            width: $w;
            height: $h;
            background-size: $w $h;
            background-position: center;
            background-repeat: no-repeat;
            background-color: transparent;
            margin-right: 20px;

            &::before {
              display: none;
            }
          }

          .icon-weibo {
            background-image: url("@/assets/img/product/icon_weibo.png");
          }

          .icon-wechat {
            background-image: url("@/assets/img/product/icon_wechat.png");
            margin-right: 0;
          }
        }
      }
    }
  }
}

@media (min-width: 1441px) and (max-width: 1750px) {
  @function scale($currentSize) {
    @return calc(#{$currentSize} * #{$global_scale_1600});
  }

  .ml20 {
    margin-left: scale(20px);
  }

  .btn {
    padding: 0 scale(20px);
    height: scale(50px);
    font-size: scale(18px);
    &.en{
      font-size: scale(18px);
    }
  }

  .el-form-item {
    margin-bottom: scale(10px);
  }

  .m {
    $wL: 370px;
    $wR: auto;
    $gutter: scale(60px);
    border-radius: scale(10px);
    padding: scale(90px) scale(50px);

    // 左侧
    &_l {
      width: $wL;
      flex: 0 0 $wL;
      border-radius: scale(10px);

      &_zoom {
        .imgBox {
          width: $wL;
          height: ($wL*210px)/370px;
        }
      }
    }

    // 右侧
    &_r {
      width: $wR;
      flex: $wR;
      margin-left: $gutter;

      // 标题
      &_t {
        margin-bottom: scale(44px);
        width: 100%;
        font-size: scale(32px);
        max-height: 3em;
      }

      &_txt {
        font-size: scale(18px);
        line-height: 1.8;

        &:not(:last-child) {
          margin-bottom: 1em;
        }
      }
      &_descBox {
        min-height: scale(450px);
      }

      // key-val布局
      .lr {
        margin-bottom: scale(30px);

        .key {
          $w: scale(100px);
          width: $w;
          flex: 0 0 $w;
        }

        &.en {
          .key {
            $w: scale(140px);
            width: $w;
            flex: 0 0 $w;
            margin-right: scale(4px);
          }
        }
      }
    }

    .btns {
      &_wrap {
        .mb50 {
          margin-bottom: scale(20px);
        }

        .btns_share {
          $w: 100%;
          width: $w;
          flex: 0 0 $w;
        }
      }

      // 分享
      // 分享
      &_share {
        .btnBox {
          width: scale(300px);
        }

        .iconBox {
          width: scale(500px);
        }

        &_i {
          margin-right: scale(20px);

          .txt {
            font-size: scale(18px);
          }

          .img {
            width: scale(24px);
          }

          :deep(.social-share) {
            $sc: 23/19;
            $w: scale(30px);
            $h: calc(#{$w} / #{$sc});

            .social-share-icon {
              width: $w;
              height: $h;
              background-size: $w $h;
              margin-right: scale(20px);
            }
          }
        }
      }
    }
  }
}
@media screen and (min-width: 1100px) and (max-width: 1440px) {
  @function scale($currentSize) {
    @return calc(#{$currentSize} * #{$global_scale_1600});
  }

  .ml20 {
    margin-left: scale(20px);
  }

  .btn {
    padding: 0 scale(20px);
    height: scale(40px);
    font-size: scale(16px);
    &.en{
      font-size: scale(16px);
    }
  }

  .el-form-item {
    margin-bottom: scale(10px);
  }

  .m {
    $wL: 240px;
    $wR: auto;
    $gutter: scale(60px);
    border-radius: scale(10px);
    padding: scale(90px) scale(50px);

    // 左侧
    &_l {
      width: $wL;
      height: $wL;
      flex: 0 0 $wL;
      border-radius: scale(10px);

      &_zoom {
        .imgBox {
          width: $wL;
          height: ($wL*210px)/370px;
        }
      }
    }

    // 右侧
    &_r {
      width: $wR;
      flex: $wR;
      margin-left: $gutter;

      // 标题
      &_t {
        margin-bottom: scale(44px);
        width: 100%;
        font-size: scale(24px);
        max-height: 3em;
      }

      &_txt {
        font-size: scale(18px);
        line-height: 1.8;

        &:not(:last-child) {
          margin-bottom: 1em;
        }
      }
      &_descBox {
        min-height: scale(260px);
      }

      // key-val布局
      .lr {
        margin-bottom: scale(30px);

        .key {
          $w: scale(100px);
          width: $w;
          flex: 0 0 $w;
        }

        &.en {
          .key {
            $w: scale(140px);
            width: $w;
            flex: 0 0 $w;
            margin-right: scale(4px);
          }
        }
      }
    }

    .btns {
      &_wrap {
        .mb50 {
          margin-bottom: scale(20px);
        }

        .btns_share {
          $w: 100%;
          width: $w;
          flex: 0 0 $w;
        }
      }

      // 分享
      // 分享
      &_share {
        .btnBox {
          width: scale(300px);
        }

        .iconBox {
          width: scale(500px);
        }

        &_i {
          margin-right: scale(20px);

          .txt {
            font-size: scale(18px);
          }

          .img {
            width: scale(24px);
          }

          :deep(.social-share) {
            $sc: 23/19;
            $w: scale(30px);
            $h: calc(#{$w} / #{$sc});

            .social-share-icon {
              width: $w;
              height: $h;
              background-size: $w $h;
              margin-right: scale(20px);
            }
          }
        }
      }
    }
  }
}
@media (max-width: 767px) {
  @function scale($currentSize) {
    @return calc(#{$currentSize} * #{$global_scale_750});
  }

  .ml20 {
    margin-left: scale(20px);
  }

  .btn {
    padding: 0 scale(20px);
    height: scale(60px);
    font-size: scale(16px);
    &.en{
      font-size: scale(18px);
    }
  }

  .el-form-item {
    margin-bottom: scale(10px);
  }

  .m {
    $wL: 100%;
    $wR: auto;
    $gutter: scale(60px);
    border-radius: scale(10px);
    padding: scale(50px) scale(50px);
    flex-direction: column;

    // 左侧
    &_l {
      width: $wL;
      height: $wL;
      flex: 0 0 $wL;
      border-radius: scale(10px);

      &_zoom {
        .imgBox {
          width: $wL;
          height: $wL;
        }
      }
    }

    // 右侧
    &_r {
      width: $wR;
      flex: $wR;
      margin-left: 0;
      margin-top: 20px;

      // 标题
      &_t {
        margin-bottom: scale(44px);
        width: 100%;
        font-size: scale(24px);
        max-height: unset;
      }

      &_txt {
        font-size: scale(18px);
        line-height: 1.8;

        &:not(:last-child) {
          margin-bottom: 1em;
        }
      }
      &_descBox {
        min-height: auto;
      }

      // key-val布局
      .lr {
        margin-bottom: scale(30px);
        display: block;

        .key {
          $w: scale(100px);
          width: $w;
          flex: 0 0 $w;
        }

        &.en {
          .key {
            $w: scale(140px);
            width: $w;
            flex: 0 0 $w;
            margin-right: scale(4px);
          }
        }
      }
    }

    .btns {
      margin-top: 20px;
      &_wrap {
        .mb50 {
          margin-bottom: scale(20px);
        }

        .btns_share {
          $w: 100%;
          width: $w;
          flex: 0 0 $w;
        }
      }

      // 分享
      &_share {
        flex-direction: column;
        .btnBox {
          justify-content: space-around;
        }
        .iconBox {
          width: 100%;

          margin-top: 20px;
        }
        &_i {
          margin-right: scale(20px);

          .txt {
            font-size: 12px;
            margin-left: 10px;
          }

          .img {
            width: 16px;
          }
          &.shareIcon {
            margin-top: 10px;
          }
          :deep(.social-share) {
            $w: 23px;
            $h: 19px;

            .social-share-icon {
              width: $w;
              height: $h;
              background-size: $w $h;
              margin-right: 0;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
<!-- 弹框内的按钮 -->
<style lang="scss" scoped>
.btnHa {
  $c: #d53b76;
  padding: 0 24px;
  height: 50px;
  font-size: 18px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &-bg {
    background: $c;
    color: #fff;
  }
  &-border {
    border: 1px solid $c;
    color: $c;
  }
  @media (min-width: 1441px) and (max-width: 1750px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
    padding: 0 scale(24px);
    height: scale(50px);
    font-size: scale(18px);
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
    padding: 0 scale(24px);
    height: scale(50px);
    font-size: scale(18px);
  }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }
    padding: 0 scale(24px);
    height: scale(50px);
    font-size: scale(18px);
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    padding: 0 10px;
    height: 24px;
    font-size: 14px;
  }
}
</style>
